<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>

<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>

</head>
<body>
  <div class="page-group">
    <div class="page page-current">
      <header class="bar bar-nav fs-header-small">
        <a href="${ctx.host}/credit-mall"
          class="icon icon-left pull-left"></a>
        <h1 class="title">我的积分</h1>
      </header>

      <div class="content">
        <div class="content-block record-header no-margin">
          <div class="row">
            <div class="col-50">
              <span class="integral">${empty credit ? 0 : credit.availableCredit}</span>
              <span>可用积分</span>
            </div>
            <div class="col-50">
              <span class="integral">${empty credit ? 0 : credit.totalCredit}</span>
              <span>累计积分</span>
            </div>
          </div>
        </div>

        <div class="list-block" style="margin-top: 0;">
          <div class="list-group record-group">
            <c:choose>
              <c:when test="${not empty creditTransactions}">
                <ul>
                  <li class="list-group-title record-list-title">消费记录</li>
                  <c:forEach items="${creditTransactions}"
                    var="creditTransaction">
                    <li class="record-list-item">
                      <div class="item-content">
                        <div class="item-media">
                          <i
                            class="icon icon-record-${creditTransaction.type.alias == 'increase' ? 'increase' : 'decrease'}"></i>
                        </div>
                        <div class="item-inner">
                          <div class="item-title">
                            <p class="no-margin color-gray">${creditTransaction.description}</p>
                            <span class="coupon-data"> <fmt:formatDate
                                value="${creditTransaction.createTime}"
                                pattern="yyyy-MM-dd hh:mm:ss" />
                            </span>
                          </div>
                          <div class="item-after">
                            <span
                              class="color-${creditTransaction.type.alias == 'increase' ? 'red' : 'green'}">
                              ${creditTransaction.type.alias == 'increase' ? "+" : "-"}${creditTransaction.value}
                            </span>
                          </div>
                        </div>
                      </div>
                    </li>
                  </c:forEach>
                </ul>
              </c:when>
              <c:otherwise>
                <ul>
                  <li class="list-group-title record-list-title">消费记录</li>
                </ul>
                <p
                  style="text-align: center; background-color: #efeff4; margin: 0;">暂无消费记录</p>
              </c:otherwise>
            </c:choose>
          </div>
        </div>
      </div>

    </div>
  </div>

  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build"
    src="js/page/credit/coupon-mall.js" />
  <script type="text/javascript">
			require([ 'page/credit/coupon-mall' ], function(page) {
				page.init()
			})
		</script>
</body>
</html>